import { useEffect } from 'react';
import { Button, Descriptions, Form, Modal, Progress, Typography } from 'antd';
import classNames from 'classnames/bind';
import type { ICommonDialog } from '@/interfaces/global';
import styles from '../../styles/backupDetailDialog.module.scss';

const cx = classNames.bind(styles);

interface IBackupPlanProps extends ICommonDialog {}

function BackupDetailDialog(props: IBackupPlanProps) {
  const { visible, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    form.resetFields();
    onClose();
  };

  return (
    <Modal
      title="触发条件设定"
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button
          key="create"
          type="primary"
          onClick={() => {
            onCancel();
          }}
        >
          终止备份
        </Button>,
        <Button key="close" onClick={onCancel}>
          取消
        </Button>
      ]}
    >
      <Descriptions className={cx('detail-desc')} column={12} bordered>
        <Descriptions.Item label="备份名称" span={6}>
          001-项目档案-20220222-01
        </Descriptions.Item>
        <Descriptions.Item label="备份人" span={3}>
          XXX
        </Descriptions.Item>
        <Descriptions.Item label="触发方式" span={3}>
          手动
        </Descriptions.Item>
        <Descriptions.Item label="备份范围" span={12}>
          正式库
        </Descriptions.Item>
        <Descriptions.Item label="备份的数据" span={12}>
          XXXXXX 全宗-档案类型
          <br />
          （备份数据包含电子档案数据对象、档案类型元数据、目录数据、电子档案管理过程数据
        </Descriptions.Item>
        <Descriptions.Item label="备份方式" span={12}>
          全量备份
        </Descriptions.Item>
        <Descriptions.Item label="全量备份状态" span={12}>
          <Typography.Text type="success">备份中（31%）</Typography.Text>
          <Progress percent={50} status="active" />
        </Descriptions.Item>
        <Descriptions.Item label="备份开始时间" span={12}>
          XXXX-XX-XX XX：XX：XX
        </Descriptions.Item>
        <Descriptions.Item label="备份完成时间" span={12}>
          -
        </Descriptions.Item>
        <Descriptions.Item label="备注" span={12}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
          Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
}

export default BackupDetailDialog;
